<template>
  <van-nav-bar :style="navbarClass" :left-arrow="arrow" :left-text="leftText" @click-left="$router.back()">
    <h3 :style="hClass" slot="title">{{ title }}</h3>
  </van-nav-bar>
</template>

<script>
export default {
  name: 'MyHeader',
  props: {
    title: {
      type: String,
      default: '标题'
    },
    navbarClass: {
      type: Object,
      default: function () {
        return {
          backgroundColor: '#FFD101',
          color:"#ffffff"
        }
      }
    },
    hClass: {
      type: Object,
      default:function () {
        return{
          color: '#ffffff'
        }
      }
    },
    arrow: {
      type: Boolean,
      default: false
    },
    text: {
      type: String
    }
  },
  computed: {
    leftText () {
      return this.arrow ? this.text : ''
    }
  }
}
</script>

<style scoped lang="scss">
.van-hairline--bottom::after{
  border: none;
}
.van-nav-bar {
  font-size: 0.45rem;
  color: #ffffff !important;
}
.van-nav-bar .van-icon {
  color: #ffffff !important;
  background-color: white;
}
.van-icon .van-icon-arrow-left .van-nav-bar__arrow{
  color: #ffffff !important;
}


</style>
